<template>
  <div>
    <main>
      <div class="title">
        您好，您的学习计划如下，并准备了数量不一的题型请前往练习，祝您学习愉快！
      </div>
      <div class="tips">
        <!-- 这里不应该是换行，根据后台数据来循环 -->
        需要关注 RA, RS, DI, RL。ASQ 占分太小，不用花太多精力。<br />
        口语总分需要 30 的话，考试时，发音需要在 15+，流利度需要 30。<br />
        在猩际中的练习，分数也应该稳定在 30+ 以上。不过，猩际 AI
        口语评分会有些边缘案例没有考虑到，所以对于部分答案的评分可能不是很准确。当对评分有疑问时，最好是可以咨询猩际老师，得到更精准的评估和建议哦
        ～ <br />SST
        其实是个很简单的题目，使用好模版。在猩际中练习时，每个答案应该尽量扣分在
        2 分以内。<br />
        HIW 一定要争取尽量满分，它是一个只要练习就能迅速提高的题目。<br />
        FIB 和 WFD 需要有 40% 以上的正确率。<br />
        其他选择题因为占分太小，在考试中尽量控制好时间，留出足够时间给 WFD。<br />
        HIW 一定要争取尽量满分，它是一个只要练习就能迅速提高的题目。<br />
        FIB 和 WFD 需要有 40% 以上的正确率。
      </div>
      <!-- 练习区域 -->
      <div class="practice">
        <ul>
           <li class="li-selected">
            <span class="mode">题目类型</span>
            <span class="num">数量</span>
          </li>
          <li class="li-selected" v-for="(item,index) in studyPlan" :key="index">
            <span class="mode">{{item.subjectTypeName}}</span>
            <span class="num">{{item.sort}}</span>
          </li>
         
        </ul>
      </div>
    </main>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '../../../utils/http'
export default {
  data () {
    return {
      data: [],
      studyPlan: [],
    }
  },
  created () {
    this.data = JSON.parse(sessionStorage.getItem('studyPlan'))
    this.getStudyPlan()
  },
  methods: {
    getStudyPlan () {
      sendPost(api.getStudyPlan, {}).then(res => {
        // console.log(res);
        this.studyPlan = res.data
      })
    },
  },
}
</script>

<style lang="less" scoped>
main {
  padding: 0 1.25rem;
  padding-bottom: 1.25rem;
  box-sizing: border-box;
  .title {
    height: 5rem;
    border-bottom: 1px solid #ededed;
    font-size: 1.25rem;
    color: #333;
    font-weight: bold;
    line-height: 5rem;
  }
  .tips {
    background-color: #fffafa;
    margin: 1.25rem 0;
    padding: 1.8125rem 1.25rem;
    box-sizing: border-box;
    font-size: 1rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 2rem;
  }
  .practice {
    ul {
      display: flex;
      flex-wrap: wrap;
      .li-unselected {
        border: none;
      }
      .li-selected {
        background-color: #fffafa;
      }
      li {
        cursor: pointer;
        width: 9.6875rem;
        height: 9.1875rem;
        margin: 1.8rem;
        border: 1px solid #ff5e4e;
        display: flex;
        flex-direction: column;
        text-align: center;
        border-radius: 0.1875rem;
        .mode {
          font-size: 1.25rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ff5e4e;
          line-height: 5.3125rem;
        }
        .num {
          font-size: 1.5rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ff5e4e;
          line-height: 1.75rem;
        }
        .mode-unselected {
          color: #999;
          line-height: 5.3125rem;
          font-size: 1.25rem;
        }
        .num-unselected {
          color: #999;
          font-size: 2.5rem;
          line-height: 1.75rem;
        }
      }
    }
  }
}
</style>
